<template>
    <el-menu default-active="2" class="aside" :collapse="isCollapse" @open="handleOpen"
        @close="handleClose">
        <div class="logo-icon">
            <img src="../assets/tjise.png" alt="" />
        </div>
        <el-sub-menu index="1">
            <template #title>
                <el-icon>
                    <document />
                </el-icon>
                <span>课程管理</span>
            </template>
            <el-menu-item index="1-1" @click="courseHandler('front')">前端课程</el-menu-item>
            <el-menu-item index="1-2" @click="courseHandler('back')">后端课程</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2">
            <template #title>
                <el-icon>
                    <user />
                </el-icon>
                <span>学生管理</span>
            </template>
            <el-menu-item index="2-1">前端班</el-menu-item>
            <el-menu-item index="2-2">后端班</el-menu-item>
        </el-sub-menu>
    </el-menu>
</template>

<script setup>
import { defineProps } from 'vue';
// 拿到父组件传来的参数
const {isCollapse} = defineProps(['isCollapse'])
import emitter from '../utils/eventBus';

// 控制侧边栏的点击事件
const courseHandler = (type) => {
    // 通过不同的type,请求不同的类型课程数据
    console.log(type)
    emitter.emit('courseType', type)
}

</script>

<style lang="less" scoped>
.aside {
    // width: 200px;
    height: 100%;
    // border: 1px solid red;
    display: flex;
    flex-direction: column;
    align-items: center;
    // justify-content: center;
    

    .logo-icon {
        // border: 1px solid blue;
        display: flex;
        flex-direction: column;
        align-items: center;
        // margin-top: 10px;
        padding: 10px;
        img{
            
            width: 100%;
            // border: 2px solid #ccc;
        }
    }
        
}
</style>